<template>
  <d2-container :filename="filename" id="BlockInfo">
    <template slot="header">焦点图列表</template>
    <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="listData"
      :add-template="popTemplate"
      :edit-template="popTemplate"
      :form-options="formOptions"
      :rowHandle="rowHandle"
      @edit-item="onEdit"
      @del-item="onDel"
      @row-add="handleRowAdd"
      @row-edit="handleRowEdit"
      @dialog-cancel="handleDialogCancel">
      <el-button slot="header" style="margin-bottom: 5px" @click="onAdd">新增</el-button>
    </d2-crud>
  </d2-container>
</template>

<script>

import utils from '@/libs/util.gaed'
import ImageColumn from '@/components/custom-column/image'
import Upload from '@/components/custom-column/upload'
let BASE_URL = '/study/blockinfo'

export default {
  components: {
    ImageColumn
  },
  data () {
    return {
      filename: __filename,
      columns: [
        {
          title: '序号',
          width: 50,
          key: 'order'
        },
        {
          title: '大图',
          key: 'main_img',
          width: 500,
          component: {
            name: ImageColumn,
            props: {
              dataKey: 'main_img'
            }
          }
        },
        {
          title: '副图',
          key: 'sub_img',
          width: 500,
          component: {
            name: ImageColumn,
            props: {
              dataKey: 'sub_img'
            }
          }
        },
        {
          title: '标题',
          key: 'title'
        },
        {
          title: '副标题',
          key: 'sub_title'
        },
        {
          title: '链接',
          key: 'url'
        },
        {
          title: '分类词',
          key: 'group_key'
        }
      ],
      rowHandle: {
        width: '220px',
        custom: [
          {
            text: '编辑',
            size: 'small',
            emit: 'edit-item'
          },
          {
            text: '删除',
            type: 'warning',
            size: 'small',
            emit: 'del-item'
          }
          /*
          {
            text: '上移',
            size: 'small',
            emit: 'up-item'
          },
          {
            text: '下移',
            size: 'small',
            emit: 'down-item'
          }
          */
        ]
      },
      uploadUrl: '', // 文件上传的URL
      listData: [], // 列表数据
      pageData: {}, // 分页数据
      popTemplate: {
        order: {
          title: '序号',
          value: 0
        },
        main_img: {
          title: '大图',
          value: '',
          component: {
            name: Upload,
            props: {
              type: 'image'
            }
          }
        },
        sub_img: {
          title: '副图',
          value: '',
          width: 500,
          component: {
            name: Upload,
            props: {
              type: 'image'
            }
          }
        },
        title: {
          title: '标题',
          value: ''
        },
        sub_title: {
          title: '副标题',
          value: ''
        },
        url: {
          title: '链接',
          value: ''
        },
        group_key: {
          title: '分类词',
          value: ''
        }
      },
      currentEditId: '',
      formOptions: {
        labelWidth: '80px',
        labelPosition: 'left',
        saveLoading: false
      }
    }
  },
  mounted () {
    this.initList()
  },
  methods: {
    initList () {
      utils.fetchData.call(this, '/third/uptoken').then(res => {
        console.log('获取到的数据为：', res)
      }).catch(err => {
        console.warn(err)
      })
      utils.fetchData.call(this, BASE_URL).then(res => {}).catch(err => {
        console.warn(err)
      })
    },
    onEdit (e) {
      this.$refs.d2Crud.showDialog({
        mode: 'edit',
        rowIndex: e.index
      })
    },
    onAdd () {
      this.$refs.d2Crud.showDialog({ mode: 'add' })
    },
    // 打开弹窗时自动进行的处理
    handleDialogOpen ({ mode }) {},
    handleRowAdd (dataObj, done) {
      console.log('当前添加的数据项为：', dataObj)
      utils.addData.call(this, BASE_URL, dataObj).then(res => {
        this.initList()
        this.$refs.d2Crud.closeDialog()
        done()
      }).catch(err => {
        console.warn(err)
      })
    },
    // 对行进行编辑
    handleRowEdit (dataObj, done) {
      let id = dataObj.row.id
      let url = BASE_URL + '/' + id
      utils.editData.call(this, url, dataObj.row).then(res => {
        this.initList()
        this.$refs.d2Crud.closeDialog()
        done()
      }).catch(err => {
        console.warn(err)
      })
    },
    onDel ({ index, row }) {
      this.$alert('确认删除当前焦点图项？', row.title, {
        confirmButtonText: '确定',
        callback: (action) => {
          let url = BASE_URL + '/' + row.id
          utils.deleteData.call(this, url).then(response => {
            console.log(response)
            this.initList()
          }).catch(err => {
            console.warn(err)
          })
        }
      })
    },
    handleDialogCancel (done) {
      this.$refs.d2Crud.closeDialog()
      done()
    }
  }
}
</script>
<style scoped>
  #BlockInfo .el-table th {
    text-align: center;
  }
</style>
<style>
  #BlockInfo div.cell .el-button {
    margin-left: 10px;
  }
</style>
